<template>
    <div class="${moduleName}-${functionName}-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="70vw" :close-on-click-modal="false">
            <el-form ref="deptDialogFormRef" :model="state.ruleForm" size="default" label-width="150px" >
                <#list formList as field>
                    <#if field.formType == 'text'>
                        <#if field.primaryPk>
                            <el-form-item v-show="false" label="${field.fieldComment!}" prop="${field.attrName}">
                                <el-input v-model="state.ruleForm.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                            </el-form-item>
                        <#else>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <el-input v-model="state.ruleForm.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                            </el-form-item>
                        </#if>
                    <#elseif field.formType == 'textarea'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-input type="textarea" v-model="state.ruleForm.${field.attrName}"></el-input>
                        </el-form-item>
                    <#elseif field.formType == 'editor'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <div class="editor-container">
                                <fast-editor v-model:get-text="state.ruleForm.${field.attrName}"/>
                            </div>
                        </el-form-item>
                    <#elseif field.formType == 'select'>
                        <#if field.formDict??>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <fast-select v-model="state.ruleForm.${field.attrName}" dict-type="${field.formDict}" placeholder="${field.fieldComment!}"></fast-select>
                            </el-form-item>
                        <#else>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <el-select v-model="state.ruleForm.${field.attrName}" placeholder="请选择">
                                    <el-option label="请选择" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </#if>
                    <#elseif field.formType == 'radio'>
                        <#if field.formDict??>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <fast-radio-group v-model="state.ruleForm.${field.attrName}" dict-type="${field.formDict}"></fast-radio-group>
                            </el-form-item>
                        <#else>
                            <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                                <el-radio-group v-model="state.ruleForm.${field.attrName}">
                                    <el-radio :label="0">启用</el-radio>
                                    <el-radio :label="1">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </#if>
                    <#elseif field.formType == 'checkbox'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-checkbox-group v-model="state.ruleForm.${field.attrName}">
                                <el-checkbox label="启用" name="type"></el-checkbox>
                                <el-checkbox label="禁用" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    <#elseif field.formType == 'date'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-date-picker type="date" value-format="YYYY-MM-DD" placeholder="${field.fieldComment!}" v-model="state.ruleForm.${field.attrName}"></el-date-picker>
                        </el-form-item>
                    <#elseif field.formType == 'datetime'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="${field.fieldComment!}" v-model="state.ruleForm.${field.attrName}"></el-date-picker>
                        </el-form-item>
                    <#elseif field.formType == 'file'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <fast-file v-model="state.ruleForm.${field.attrName}" />
                        </el-form-item>
                    <#elseif field.formType == 'image'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <fast-img v-model="state.ruleForm.${field.attrName}" :imageUrl="state.ruleForm.${field.attrName}"  @update-imageUrl="onUrl${field.attrName}" />
                        </el-form-item>
                    <#elseif field.formType == 'images'>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <fast-imgs v-model="state.ruleForm.${field.attrName}" />
                        </el-form-item>
                    <#else>
                        <el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <fast-file v-model="state.ruleForm.${field.attrName}" />
                        </el-form-item>
                    </#if>
                </#list>
            </el-form>
            <template #footer>
                <el-button @click="onCancel" size="default">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="${moduleName}${FunctionName}Dialog">
    import {reactive, defineAsyncComponent, ref} from 'vue';
    // 引入组件
    const  FastEditor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
    import FastSelect from "/@/components/fast-select/src/fast-select.vue";
    import FastRadioGroup from "/@/components/fast-radio-group/src/fast-radio-group.vue";
    import FastImg from "/@/components/fast-upload/img.vue";
    import FastImgs from "/@/components/fast-upload/imgs.vue";
    import FastFile from "/@/components/fast-upload/file.vue";
    import { ${functionName}Api } from '/@/api/${moduleName}/${functionName}';
    const baseApi = ${functionName}Api();
    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    const ${functionName}DialogFormRef = ref();

    const state = reactive({
        ruleForm: {
            <#list fieldList as field>
            ${field.attrName}: ''<#sep>,
            </#list>
        },
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
    });
    // 重置
    const resetFomr = () => {
        state.ruleForm = {
            <#list fieldList as field>
            ${field.attrName}: ''<#sep>,
            </#list>
        }
    }
    const openDialog = (type: string, row: Row${FunctionName}Type) => {
        resetFomr();
        state.dialog.isShowDialog = true;
        if (type === 'edit'){
            state.ruleForm = row;
            state.dialog.title = '修改';
            state.dialog.submitTxt = '修 改';
            state.dialog.type = 'edit';
        }
        if (type === 'add') {
            state.dialog.title = '新增';
            state.dialog.submitTxt = '新 增';
            state.dialog.type = 'add';
        }
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        emit('refresh', state.ruleForm);
    };
    <#list fieldList as field>
     <#if field.formType == 'image'>
        const onUrl${field.attrName}=(data)=>{
            state.ruleForm.${field.attrName} = data;
        }
     </#if>
    </#list>

    // 暴露变量
    defineExpose({
        openDialog, closeDialog
    });
</script>
